<template>
	<view class="box">
		<view class="flex_wrap row_between">
			<view class="flex_wrap">
				<u-icon
					name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2022/09/26/fc37e69dde1544b4a1f1897f5520d486.png"
					size="60rpx" label="十蜂健康" labelSize="34rpx" labelColor="#171717" space="20rpx" />
				<u-text :text="'阅读量'+useInterests.heatValue" size="28rpx" color="#AAA" margin="0 0 0 26rpx" />
			</view>
			<u-icon
				name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/21/1b16abcefdfd42f48dbf5e7c15e258d7.png"
				size="32rpx" label="分享" labelSize="28rpx" labelColor="#1783F8" space="4rpx" @click="QRcodeFun()" />
		</view>
		<u-text :text="useInterests.videoIntro" size="48rpx" bold color="#161616" margin="48rpx 0 16rpx" />
		<view class="flex_wrap">
			<view>
				<u-text :text="$u.timeFormat(useInterests.uploadTime, 'yyyy-mm-dd hh:MM') + '发布'" size="32rpx"
					color="#AAAAAA" />
			</view>
			<text class="total" v-if="styleFirstNum">{{styleFirstNum == '0' ? '每日健康' : '每日金融'}}</text>
		</view>
		<view class="u_parse">
			<!-- <u-parse :content="useInterest"></u-parse> -->
			<rich-text :nodes="useInterest" class="wrapper"></rich-text>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<u-text
			    text="评论"
			    size="28rpx"
			    color="#3D3D3D"
			/>
			<u-gap height="24rpx" />
			<u-input
			    placeholder="写下你的观点..."
			    border="surround"
			    v-model="commentValue"
			    @change="change"
				@blur="handleBlur"
				:customStyle="{
					background: '#F7F7F7',
					borderRadius: '8rpx',
					height: '86rpx',
					color:'#AAAAAA'
				}" 
				:placeholderStyle="{
					fontSize: '28rpx',
					color: '#aaa',
				}"
			/>
			<u-gap height="34rpx" />
			<view class="comment_detail" v-for="item in reviewList" :key="item.id">
				<u-text :text="item.customerName" color="#777777" size="28rpx"
					iconStyle="margin-right:16rpx;width:60rpx;height:60rpx;border-radius:60rpx;"
					:prefixIcon="item.customerProfilePicture || '/static/img/conference/MissingAvatar.png'" />
				<view class="comment_details">
					<u-text
					    :text="item.reviewInfo"
					    size="32rpx"
					    color="#181818"
					/>
					<u-gap height="16rpx" />
					<u-text
					    :text="$u.timeFormat(
		                    item.createTime,
		                    'yyyy/mm/dd'
		                )"
					    size="24rpx"
					    color="#AAAAAA"
					/>
				</view>
			</view>
		</view>

		<u-popup :show="showQR" mode="center" @close="showQR = false" @touchmove.stop.prevent="() => {}">
			<view>
				<u--image :src="showImgData" width="200px" height="200px"></u--image>
				<u-text text="长按二维码即可分享" size="32rpx" color="#333" margin="26rpx 0 0" align="center" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		baseUrl
	} from "@/config/tendIdConfig";
	import {
		genWxMpQrCode
	} from "@/api/orderSalesman.js";
	import { listReview ,addReview} from "@/api/card.js";
	export default {
		data() {
			return {
				useInterest: '',
				useInterests: {},
				styleFirstNum: '',
				showQR: false,
				showImgData: '',
				commentValue:'',
				reviewList:[]
			};
		},
		onLoad(options) {
			this.id = decodeURIComponent(options.id);
			this.styleFirstNum = options.styleFirstNum
			this.getDetailInfo(this.id)
			this.getReviewList()
		},
		methods: {
			async getReviewList(){
				const params = {
					pageNum: 1,
					pageSize: 100,
					reviewFromRecordsId:this.id
				};
				const reviewList = await listReview(params);
				this.reviewList = reviewList.data.rows
			},
			async handleBlur(event) {
				this.commentValue = event;
				 console.log(event,'value>>>')
				 
				if ( this.commentValue.length ) {
					const params = {
						reviewInfo: this.commentValue,
						reviewFromRecordsId:this.id
					};
					const res = await addReview(params);
					this.getReviewList()
				}
			},
			QRcodeFun() {
				const token =
					this.$store.getters?.customer_token ||
					uni.getStorageSync("customer_token");
				const that = this;
				uni.request({
					url: baseUrl +
						"/customer/wx/qrcode/genWxMpQrCode",
					method: "POST",
					data: {
						scene: 0,
						sceneId: that.useInterests.id
					},
					header: {
						Authorization: token,
					},
					success(res) {
						if (res.data.code == 200) {
							that.showQR = true;
							that.showImgData = res.data.data.qrCodeUrl;
						}
					},
				});
			},
			onShareTimeline: function() {
				let that = this;
				return {
					title: that.useInterests.videoIntro,
					query: {
						id: that.useInterests.id,
						styleFirstNum: that.styleFirstNum
					},
					imageUrl: that.useInterests.videoCover,
				};
			},
			onShareAppMessage: function() {
				// uni-app 会自动处理分享
				let that = this;
				// 返回数据
				return {
					title: that.useInterests.videoIntro,
					imageUrl: that.useInterests.videoCover,
					path: "pages_consultation/counsellings/ichrTextDetails?id=" + that.useInterests.id +
						"&styleFirstNum=" + that.styleFirstNum,
				};
			},

			getDetailInfo(id) {
				const token =
					this.$store.getters?.customer_token ||
					uni.getStorageSync("customer_token");
				const that = this;
				uni.request({
					url: baseUrl +
						"/customer/video_info_customer/open/getVideoByIdNoToken/" +
						id,
					method: "GET",
					header: {
						Authorization: token,
					},
					success(res) {
						that.useInterests = res.data.data
						that.useInterest = that.formatRichText(res.data.data.richText)
						that.getImproveReading(id)
					},
				});
			},
			
			getImproveReading(id) {
				const token =
					this.$store.getters?.customer_token ||
					uni.getStorageSync("customer_token");
				const that = this;
				uni.request({
					url: baseUrl +
						"/customer/video_info_customer/improveReading/" +
						id,
					method: "GET",
					header: {
						Authorization: token,
					},
					success(res) {
						console.log(res,'1111')
						
					},
				});
			},
			//解析富文本方法
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/<p>/gi, '<br>');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
	};
</script>

<style scoped lang="scss">
	.box {
		padding: 24rpx 48rpx 60rpx;
	}

	.total {
		width: 136rpx;
		height: 40rpx;
		background: #1783F8;
		border-radius: 10rpx 10rpx 10rpx 0;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 36rpx;
	}

	.u_parse {
		padding: 32rpx 0 52rpx;
	}
	
	.wrapper {
	  white-space: pre-wrap;
	  padding: 1rem;
	}
	.wrapper p {
	  min-height: 1em;
	}
	p {
	    display: block;
	    margin-block-start: 0em;
	    margin-block-end: 0em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	}
	/* 或者 */
	.wrapper p:empty {
	  height: 1em;
	}
	.comment_detail{
		border-bottom: 1rpx solid #DCDCDC;
		padding-bottom: 32rpx;
		margin-bottom: 32rpx;
	}
	.comment_details{
		padding-left: 76rpx;
	}
</style>